<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>nice调度任务</title>

    <!-- Bootstrap core CSS -->
    <link href="static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="static/css/dashboard.css" rel="stylesheet">

  </head>

  <body>
	<!--导航栏-->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">调度任务配置[{{ query_dict["login_user"] }}]</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
          </ul>
          <form class="navbar-form navbar-right">
            <!--input type="text" class="form-control" placeholder="Search..." -->
          </form>
        </div>
      </div>
    </nav>

    <!--侧边栏-->
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="#" onclick="document.update_form.action='/job_list';$('form').submit()">调度任务列表</a></li>
          </ul>
        </div>
        
	<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <!--查询-->
        <h2 class="sub-header">任务配置</h2>
          <div class="row">
            <!--外部依赖模态框-->
            <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id='mySmallModalLabel'>
            <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="gridSystemModalLabel">添加外部依赖</h4>
            </div>
            <div class="modal-body">
            
                 <div class="input-group">
                 <label>依赖任务:</label>
                 <input type="text"  class="form-control"  id="ext_jobname" name='ext_jobname' placeholder="跨项目或跨时间维度的依赖任务" value=''>
                 <div class="input-group-btn">
                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                     <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
                 </div>
                 </div> 
                 <div class="radio">
                    <label>时间类型:</label>
                    <label>
                    <input type="radio" name="ext_timetype" id="day" value="day" checked> day
                    </label>
                    <label><input type="radio" name="ext_timetype" id="hour" value="hour"> hour</label>
                    <label>小时间隔:</label>
                    <label> <input type="text"  class="form-control"  id="ext_hourdiff" name='ext_hourdiff' placeholder="基准时间前用负数" value='0'></label>
                 </div>
                 <div class="alert alert-info alert-dismissible" role="alert">
                 【注】基于当前任务的基准时间,去计算依赖任务的执行时间<br>
                 【注】基准时间以脚本中的时间参数来计算,如果没有参数,默认为cur_date<br>
                 【例1】当前任务配置为last_hour,值为2015120910,依赖任务时间类型为hour,小时间隔为-1,则会检查2015120909时间点的依赖任务是否执行<br>
                 【例2】当前任务配置为cur_date,值为20151210,依赖任务时间类型为hour,小时间隔为-1,则会检查2015120923时间点的依赖任务是否执行<br>
                 【例3】如果希望小时级的依赖任务，一天内的所有小时都检查，则选择成day类型，会自动检查
                 </div>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-primary" onclick="add_ext_deps()"  data-dismiss="modal">添加</button>
            </div>
            </div>
            </div>
            </div>

            <form class="form-horizontal" action='/job_update' method='post' name='update_form'>
                <div class="alert alert-danger" role="alert" style="display: none" name='name_hint' id='name_hint'>
                    任务[<span id='show_name' name='show_name'>&nbsp;</span>]已经存在,请更换
                </div>
                <div class="form-group">
                <label for="id" class="col-sm-2 control-label">id</label>
                <div class="col-sm-10">
                <input readonly type="text" class="form-control" id="id" name='id' placeholder="id" value="{{ job.id}}">
                </div></div>
                <div class="form-group">
                <label for="name" class="col-sm-2 control-label">任务名/流程名</label>
                <div class="col-sm-10">
                <input {{ 'readonly' if job.name!='' else '' }} onchange='check_exist()' type="text" class="form-control" id="name" name='name' placeholder="name,如udw_ml_api,不可重复,流程末节点不要用'.',会导致azkaban不显示子任务" value="{{ job.name}}">
                </div></div>
                <div class="form-group">
                <label for="project_name" class="col-sm-2 control-label">项目名</label>
                <div class="col-sm-10">
                <select class="form-control" name='project_name' id='project_name' onchange='choose_project()'>
                    {% for p in projects %}
                    <option {{ 'selected' if job.project_name==p else '' }} value='{{ p }}' >{{ p }}</option>
                    {% end %}
                </select>
                <!--input {{ 'readonly' if job.project_name!='' else '' }}  type="text" class="form-control" id="project_name" name='project_name' onchange='alert("aa")' placeholder="project_name,如data_schedule,项目需先在azkaban中建好" value="{{ job.project_name}}">
                <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
                </div></div-->
                </div></div>
                
                <!--div class="form-group" style='display:{{ '' if query_dict['login_user']=='wangxu' else 'none' }};'-->
                <div class="form-group">
                <label for="server_host" class="col-sm-2 control-label">服务器</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="server_host" name='server_host' placeholder="server_host,服务器域名或IP" value="{{ job.server_host}}">
                </div></div>
                <div class="form-group">
                <label for="server_user" class="col-sm-2 control-label">服务器用户</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="server_user" name='server_user' placeholder="server_user,如hadoop,执行命令的用户,需要保证azkaban服务所属用户有跳转的权限" value="{{ job.server_user if job.server_user!='' else 'hadoop'}}">
                </div></div>
                <div class="form-group">
                <label for="server_dir" class="col-sm-2 control-label">服务器目录</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="server_dir" name='server_dir' placeholder="server_dir,如/tmp,执行任务的服务器目录，有的话自动执行cd" value="{{ '/tmp' if job.server_dir=='' else job.server_dir }}">
                </div></div>
                <div class="form-group">
                <label for="server_script" class="col-sm-2 control-label">执行脚本</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="server_script" name='server_script' placeholder="server_script,如python blog02_log_alarm.py &[last_hour];可以传默认的时间参数" value="{{ job.server_script if job.server_script!='' else 'echo &[last_date];'}}">
                </div></div>
                <div class="form-group">
                <label for="server_script" class="col-sm-2 control-label"></label>
                <div class="col-sm-10">
                <div class="alert alert-info alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <strong>可使用的参数:</strong><br>
                    <pre>服务器目录:/tmp,执行任务的服务器目录
默认目录参数 &[default_dir] 替换为 /tmp (配置文件中可自定义参数)
默认时间参数
例:流程调度的时间为2015-09-11 09:12:20
当前时间        &[cur_time]   替换为 2015-09-11 09:12:20
当前小时        &[cur_hour]   替换为 2015091109
今天           &[cur_date]   替换为 20150911
上一个小时      &[last_hour]  替换为 2015091108
上两个小时      &[last_two_hour]  替换为 2015091107
昨天           &[last_date]  替换为 20150910
前天           &[last_two_date]  替换为 20150909</pre>

                </div>
                </div></div>
                <div class="form-group">
                <label for="dependencies" class="col-sm-2 control-label">依赖</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="dependencies" name='dependencies' readonly placeholder="请选择所依赖的节点,可以去DAG图里连线了哦~" value="{{ job.dependencies}}">
                {% for j in jobs %} 
                <label class="checkbox-inline" id="{{ j.name }}_label" name="{{ j.name }}_label">
                  <input type="checkbox" name='dependencies_box' onchange='choose_dependencies()' pname='{{ j.project_name }}' {{ 'checked' if (','+job.dependencies+',').find((','+j.name+','))>=0 else '' }} id="{{ j.name }}" value="{{ j.name }}"> {{ j.name }}
                </label>
                {% end %}
                </div></div>

                <div class="form-group">
                <label for="ext_dependencies" class="col-sm-2 control-label">外部依赖</label>
                <div class="col-sm-10">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mySmallModalLabel">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                </button>
                <textarea readonly rows='6' class="form-control" id="ext_dependencies" name='ext_dependencies' placeholder="跨项目或跨时间维度任务依赖" >{{ job.ext_dependencies }}</textarea>
                </div></div>
                
                <div class="form-group">
                <label for="flow_name" class="col-sm-2 control-label">子流程节点</label>
                <div class="col-sm-10">
                <input  type="text" class="form-control" id="flow_name" name='flow_name' placeholder="子流程配置,选取其它流程做为子流程任务,如果不需要置空" value="{{ job.flow_name}}">
                </div></div>
                <div class="form-group">
                <label for="success_email" class="col-sm-2 control-label">成功邮件</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="success_email" name='success_email' placeholder="success_email,用逗号分隔" value="{{ job.success_email}}">
                </div></div>
                <div class="form-group">
                <label for="failure_email" class="col-sm-2 control-label">失败邮件</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="failure_email" name='failure_email' placeholder="failure_email,用逗号分隔" value="{{ job.failure_email}}">
                </div></div>
                <div class="form-group">
                <label for="success_sms" class="col-sm-2 control-label">成功短信</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="success_sms" name='success_sms' placeholder="success_sms,用逗号分隔" value="{{ job.success_sms}}">
                </div></div>
                <div class="form-group">
                <label for="failure_sms" class="col-sm-2 control-label">失败短信</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="failure_sms" name='failure_sms' placeholder="failure_sms,用逗号分隔,邮箱前缀" value="{{ job.failure_sms}}">
                </div></div>
                <div class="form-group">
                <label for="retries" class="col-sm-2 control-label">重试次数</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="retries" name='retries' placeholder="retries,任务失败后重试的次数,0表示不重试" value="{{ job.retries}}">
                </div></div>
                <div class="form-group">
                <label for="creator" class="col-sm-2 control-label">创建者</label>
                <div class="col-sm-10">
                <input readonly type="text" class="form-control" id="creator" name='creator' placeholder="creator" value="{{ job.creator}}">
                </div></div>
                <div class="form-group">
                <label for="updater" class="col-sm-2 control-label">更新者</label>
                <div class="col-sm-10">
                <input readonly type="text" class="form-control" id="updater" name='updater' placeholder="updater" value="{{ job.updater}}">
                </div></div>
                <div class="form-group">
                <label for="create_time" class="col-sm-2 control-label">创建时间</label>
                <div class="col-sm-10">
                <input readonly type="text" class="form-control" id="create_time" name='create_time' placeholder="create_time" value="{{ job.create_time}}">
                </div></div>
                <div class="form-group">
                <label for="update_time" class="col-sm-2 control-label">更新时间</label>
                <div class="col-sm-10">
                <input readonly type="text" class="form-control" id="update_time" name='update_time' placeholder="update_time" value="{{ job.update_time}}">
                </div></div>
                <div class="form-group">
                <label for="loc" class="col-sm-2 control-label">DAG图位置</label>
                <div class="col-sm-10">
                <input readonly type="text" class="form-control" id="loc" name='loc' placeholder="loc" value="{{ job.loc}}">
                </div></div>
                <div class="form_group">
                    <input type="hidden" name='query_name' value='{{ query_dict["query_name"] }}'>
                    <input type="hidden" name='query_project_name' value='{{ query_dict["query_project_name"] }}'>
                    <input type="hidden" name='query_server_host' value='{{ query_dict["query_server_host"] }}'>
                    <input type="hidden" name='query_user' value='{{ query_dict["query_user"] }}'>
                    <input type="hidden" id='session_id' name='session_id' value='{{ query_dict["session_id"] }}'>
                    <input type="hidden" id='login_user' name='login_user' value='{{ query_dict["login_user"] }}'>
                    <label for="form_span" class="col-sm-2 control-label"></label>
                    <div class="col-sm-10">
                    <button type="button" onclick="$('form').submit()" name='submit_btn' id='submit_btn' class="btn btn-primary"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>&nbsp;Submit</button>
                    </div>
                </div>
           </form>
          </div>
      </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/bootstrap-suggest.min.js"></script>
    <script type="text/javascript">
    function edit_job(name){
        session_id = $('#session_id').attr("value")
        login_user = $('#login_user').attr("value")
        name_str = ''
        if(name!='')
            name_str = '&name='+name
        url = '/job_update?session_id='+session_id+'&login_user='+login_user
        alert(url)
        window.location.href=url
    }
    function check_exist(){
        name = $('#name')[0].value
        document.getElementById("show_name").innerHTML= name
        $.post("/job_check_exist",
                {'name':name},
                function(data,status){
                    if(data == 'exist'){
                        $('#name_hint').show()
                        $('#submit_btn').attr('disabled',"true"); 
                    }else{
                        $('#name_hint').hide()
                        $('#submit_btn').removeAttr("disabled");
                    }
                }
        );
    }
    function choose_project(){
        p_selected = $('#project_name').val()
        //$("input[name='dependencies_box']").attr("checked",false);
        var allChk=$("input[name='dependencies_box']");
        str = ''
        $(allChk).each(function(){
            pname = $(this).attr('pname')
            id = this.value
            id_items = id.split('.')
            id_str = ''
            for(i=0;i<id_items.length;i++){
                if(i>0){
                    id_str += '\\.'    
                }
                id_str += id_items[i]
            }
            l = (id_str+'_label')
            if(pname == p_selected){
                str += ','+l
                $('#'+l).show()
            }else{
                $('#'+l).hide()
                $('#'+id_str).attr("checked",false);
            }
        })
        choose_dependencies()
        //$(arrChk).each(function(){
        //    window.alert(this.value);                        
        //}); 
    }

    function choose_dependencies(){
        var allChk=$("input[name='dependencies_box']:checked");
        str = ''
        $(allChk).each(function(){
            id = this.value
            if(str!=''){
                str += ','    
            }
            str += id
        })
        $('#dependencies').attr('value',str)
    }
    choose_project();
    
    //deps的json对象
    var g_ext_jobs = {}
    //var g_ext_deps = {"jobs":g_jobs}

    function add_ext_deps(){
        var ext_jobname = $('#ext_jobname').val()
        var ext_timetype = $("input[name='ext_timetype']:checked").val();
        var ext_hourdiff = parseInt($('#ext_hourdiff').val())
        
        var job = {"name":ext_jobname,"time_type":ext_timetype,"hour_diff":ext_hourdiff}
        g_ext_jobs[ext_jobname] = job
        generate_ext_deps_json()
        add_ext_deps_dom(ext_jobname,ext_timetype,ext_hourdiff)
        $('#ext_jobname').val('')
        $('#ext_hourdiff').val(0)
    }

    function del_ext_deps(ext_jobname){
        console.log(ext_jobname)
        delete g_ext_jobs[ext_jobname]
        console.log(g_ext_jobs)
        generate_ext_deps_json()
    }

    function generate_ext_deps_json(){
        var jobs = new Array()
        for(var k in g_ext_jobs){
            var job = g_ext_jobs[k]
            jobs.push(job)
        }
        var ext_deps = {"jobs":jobs}
        var ext_deps_json = JSON.stringify(ext_deps)
        if(jobs.length==0)
            ext_deps_json = ''
        $('#ext_dependencies').val(ext_deps_json)
    }

    function add_ext_deps_dom(ext_jobname,ext_timetype,ext_hourdiff){
        var mes = ext_jobname+' | '+ext_timetype+' | '+ext_hourdiff

        var new_deps = '<div class="alert alert-success alert-dismissible" role="alert">'
                        + '<button type="button" class="close" onclick=\'del_ext_deps("'+ext_jobname+'")\'  data-dismiss="alert" aria-label="Close"> '
                        + '<span aria-hidden="true">&times;</span></button>'
                        + mes +'</div>'
        $('#ext_dependencies').before(new_deps)
        /*var deps_json = $('#ext_dependencies').val()
        #var deps = null
        if(deps_json!=''){
            
        }*/
    }
    function init_ext_deps(){
        var ext_deps_json = $('#ext_dependencies').val()
        if(ext_deps_json=='')
            return 
        var ext_deps = JSON.parse(ext_deps_json)
        var jobs = ext_deps.jobs
        console.log(jobs)
        for(i in jobs){
            console.log(jobs[i])
            var job = jobs[i]
            var name = job.name
            g_ext_jobs[name] = job
            add_ext_deps_dom(name,job.time_type,job.hour_diff)
        }
    }
    init_ext_deps()

    var extBsSuggest = $("#ext_jobname").bsSuggest({
        indexId: 2,
        indexKey: 1,
        showBtn: false,
        data:{
            'value':[
                {% for j in all_jobs %}
                {% if j.flow_name=='' %}
                { 'project_name':'{{ j.project_name }}' ,'name':'{{ j.name }}','time_type':'{{ j.get_time_type() }}'},
                {% end %}
                {% end %}
            ],
            'defaults':'nice'
        }
    })



    /*.on('onUnsetSelectValue', function (e) {
            alert(e);
        });
        /*allowNoKeyword: true,   //是否允许无关键字时请求数据。为 false 则无输入时不执行过滤请求
        multiWord: true,         //以分隔符号分割的多关键字支持
        separator: ",",          //多关键字支持时的分隔符，默认为空格
        getDataMethod: "url",    //获取数据的方式，总是从 URL 获取
        url: 'http://unionsug.baidu.com/su?p=3&t='+ (new Date()).getTime() +'&wd=', //优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数
        jsonp: 'cb',                      //如果从 url 获取数据，并且需要跨域，则该参数必须设置
        processData: function (json) {    // url 获取数据时，对数据的处理，作为 getData 的回调函数
            //alert(json)
            var data = {value: []}
            data.value.push({pname : 'aaa'})
            data.value.push({pname : 'bbb'})
            data.value.push({pname : 'ccc'})
            
            data.defaults = 'nice';
            return data;
        }
        */
    </script>
  </body>
</html>
